class Tab {
  constructor(mode) {
    var modeList = ['fade', 'slide'];
    this.mode = modeList.includes(mode) ? mode : 'fade';
    this.curIndex = 0;

    // 在页面中获取需要操作的 dom 元素
    this.oPageContainer = $('.container');
    this.oPageTab = $('.c-tab');
    this.oPageWrapper = $('.p-wrapper');
    this.oPageItems = $('.p-item');
    this.oPageMode = $('#c-mode');
    this.oPageBtn = $('#c-button');

    // 初始化程序
    this.init();
  }


  init() {
    this.setMode();
    this.initPage();
    this.bindClickEvent();
  }

  setMode() {
    this.oPageMode.html(this.mode);
    this.oPageContainer.removeClass('slide fade').addClass(this.mode);
  }

  initPage() {
    switch (this.mode) {
      case 'fade':
        this._fadeInitPage();
        break;
      case 'slide':
        this._slideInitPage();
        break;
      default:
        this._fadeInitPage();
        break;
    }
  }

  bindClickEvent() {
    this.oPageTab.on('click', '.item', $.proxy(this.tabClick, this));
    this.oPageBtn.on('click', '', $.proxy(this.btnClick, this));
  }


  tabClick(event) {
    // 给当前的元素添加 active 类样式，并且移除其兄弟节点的 active 类样式
    var event = event || window.event;
    var tarNode = $(event.target || event.srcElement);
    this.curIndex = tarNode.index();

    if (tarNode[0].className === 'item') {
      tarNode.addClass('active').siblings('.item').removeClass('active');
    }

    // 调用切换页面
    this._changePage();
  }

  btnClick() {
    this.mode = this.mode == 'fade' ? 'slide' : 'fade';
    this.setMode();
    this.initPage();
  }

  _changePage() {
    switch (this.mode) {
      case 'fade':
        this._fadePage();
        break;
      case 'slide':
        this._slidePage();
        break;
      default:
        this._fadePage();
        break;
    }


  }

  // 初始化页面
  _fadeInitPage() {
    this.oPageItems.css('display', 'none');
    this.oPageItems.eq(this.curIndex).fadeIn();
    this.oPageWrapper.css('left', 0);
  }
  _slideInitPage() {
    this.oPageItems.css({
      'display': 'block',
    });
    this.oPageWrapper.css('left', -this.curIndex * 500,);
  }

  // 切换页面
  _fadePage() {
    this.oPageItems.eq(this.curIndex).fadeIn(200).siblings('.p-item').fadeOut(300);
  }
  _slidePage() {
    this.oPageWrapper.stop().animate({
      left: (-this.curIndex * 500) + 'px'
    });
  }
}

export { Tab };